<template>
  <div class="main-container-content">
    <div class="tableBar">
      <el-input placeholder="菜品分类搜索..." style="width: 20%" clearable v-model="pageState.keyword" />
      <el-button class="search-btn normal-btn" :icon="Search" @click="toSearch">查询 </el-button>
      <div style="float: right">
        <el-button class="baseBut" :icon="Plus" @click="insertDishCategory">新增菜品分类 </el-button>
      </div>
    </div>
    <el-table :data="listData" stripe class="tableBox">
      <el-table-column prop="name" label="分类名称" />

      <el-table-column prop="sort" label="排序" />
      <el-table-column label="状态">
        <template v-slot="scope">
          <span style="color: #13ce66" v-if="scope.row.status === 1">● 启用</span>
          <span style="color: #3d3d3d" v-else>● 禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="操作时间" />
      <el-table-column label="操作" width="200" align="center">
        <template v-slot="scope">
          <el-button :link="true" size="small" :icon="Edit" @click="editHandle(scope.row.id)">修改</el-button>
          <el-button :link="true" size="small" :icon="Delete" @click="deleteHandle(scope.row.id)" class="delBut">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="pageState.total" :page-size="pageState.pageSize" small class="pagination" />
    <SaveDialog
      title="菜品分类"
      v-model:visible="saveComponentState.visible"
      :id="saveComponentState.form.id"
      @query="saveComponentState.query"
      @save="saveComponentState.save"
      :width="'35%'"
    >
      <template #body>
        <el-form ref="classData" :model="saveComponentState.form" class="demo-form-inline" :rules="saveComponentState.rules" label-width="100px">
          <el-form-item label="分类名称：" prop="name">
            <el-input v-model="saveComponentState.form.name" placeholder="请输入分类名称" maxlength="20" />
          </el-form-item>
          <el-form-item label="排序：" prop="sort">
            <el-input v-model="saveComponentState.form.sort" placeholder="请输入排序" />
          </el-form-item>
          <el-form-item label="状态：" prop="status">
            <el-switch
              v-model="saveComponentState.form.status"
              :active-value="1"
              :inactive-value="0"
              class="ml-2"
              :style="{ '--el-switch-on-color': '#13ce66', '--el-switch-off-color': '#ff4949' }"
            />
          </el-form-item>
        </el-form>
      </template>
    </SaveDialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, getCurrentInstance } from 'vue'
import { Delete, Edit, Plus, Search, Share, Upload } from '@element-plus/icons-vue'
import DishCategory from '@/types/entity/DishCategory'
import ComponentHat from '@/plugins/type'
const { $store, $API, $modal } = <ComponentHat>getCurrentInstance().proxy
import SaveDialog from '@/components/save-dialog/index.vue'
import propertiesCopyUtils from '@/utils/properties-copy'
import { DishCategorySaveParam } from '@/types/param/dish-category'

// Data
const listData = ref([] as DishCategory[])
const pageState = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  keyword: ''
})
// save or insert components dialog state
const saveComponentState = reactive({
  rules: {
    name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
    sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
  },
  visible: false,
  form: {
    id: null
  } as DishCategory,
  async query() {
    const selectDishCategoryResult = await $API.dishCategory.getShopDishCategory(saveComponentState.form.id)
    if (!selectDishCategoryResult.success) {
      $modal.msgError(selectDishCategoryResult.message)
      return false
    }
    Object.assign(saveComponentState.form, selectDishCategoryResult.data)
    return true
  },
  async save(callback: (success: boolean) => void) {
    const dishCategorySaveParam = propertiesCopyUtils([saveComponentState.form], new DishCategorySaveParam())
    const result = await $API.dishCategory.saveDishCategory(dishCategorySaveParam)
    if (result.success) refreshList()
    callback(result.success)
  }
})

async function refreshList() {
  const result = await $API.dishCategory.queryList(pageState)
  console.log(result.data)
  listData.value = result.data.listData
  pageState.total = result.data.total
}
// 初始化列表
refreshList()
// 点击搜索时
function toSearch() {
  pageState.currentPage = 1
  refreshList()
}
const editHandle = (dishCategoryId: number) => {
  saveComponentState.form.id = dishCategoryId
  saveComponentState.visible = true
}
// 点击菜品的删除按钮时
const deleteHandle = async (dishCategoryId: number) => {
  const result = await $API.dishCategory.removeShopDishCategory(dishCategoryId)
  if (result.success) {
    $modal.msgSuccess('删除菜品分类成功！')
    // 刷新当前页数据
    refreshList()
  } else {
    $modal.msgError('删除菜品分类失败！' + result.message)
  }
}
// 点击添加菜品分类dialog
function insertDishCategory() {
  // 新增必须将id置空
  saveComponentState.form = new DishCategory()
  saveComponentState.visible = true
}
</script>

<style scoped>
.search-btn {
  margin-left: 5px;
}

.base-category-status {
  color: #32cd32;
}

.stop-use {
  color: red;
}

.tableBar {
  display: inline-block;
  width: 100%;
}
</style>
